{% extends 'base.html' %}

{% block title %}Testing Centers — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<section class="py-5">
  <div class="container">
    <h2 class="fw-bold mb-2">TSN Digital testing centers</h2>
    <p class="text-muted mb-4">Book an in-person certification exam at one of our centers.</p>
    <div class="row g-4">
      {% for center in centers %}
      <div class="col-md-6">
        <div class="border rounded-4 p-4 h-100">
          <h5 class="fw-bold">{{ center.name }}</h5>
          <div class="text-muted small mb-2">{{ center.city }}</div>
          <div class="mb-2" style="white-space:pre-line;">{{ center.address }}</div>
          {% if center.phone %}<div class="small"><i class="bi bi-telephone me-1"></i>{{ center.phone }}</div>{% endif %}
          {% if center.email %}<div class="small"><i class="bi bi-envelope me-1"></i>{{ center.email }}</div>{% endif %}
          {% if center.map_url %}
            <a href="{{ center.map_url }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary mt-3">View on map</a>
          {% endif %}
          {% if center.directions %}
            <div class="small text-muted mt-3" style="white-space:pre-line;">{{ center.directions }}</div>
          {% endif %}
        </div>
      </div>
      {% empty %}
      <div class="col-12 text-muted">No testing centers published yet.</div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}